<template>
    <div class="lbtlistFlex">
        <div style="flex: 2; flex-shrink: 0; width: calc(66.66% - 10px);">
            <RoundCornerCarousel :lbtImg="lbtImg" />
        </div>
        <div style="flex: 1; flex-shrink: 0; width: calc(33.33% - 10px); margin-left: 20px;">
            <div class="syxwdt">
                <div class="syxwdt_flexTitle">
                    <div class="syxwdt_bt">新闻动态</div>
                    <div class="syxwdt_ckgd" @click="xwdtckgdfun()">查看更多>></div>
                </div>
                <div class="syxwdt_list">
                    <div class="syxwdt_listFor" v-for="item in xwdtData" :key="item.id" @click="xwdtItemfun(item.id)">
                        {{ item.title }}
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- <div style="margin-top: 25px;">
        <HorizontalScrolling title="精品商品" :products="productList" />
    </div> -->
    <!-- <div class="shoyeMargin">
        <HomeModuleMore title="入驻企业信息" :src="store.imgSrcPrefix + '入驻企业信息.png'" @more-click="rzqylistJump">
            <template #nr>
                <EnterpriseInformationList :qyList="rzqyxxData" padding="15px 36px" />
            </template>
        </HomeModuleMore>
    </div> -->
    <!-- <div class="shoyeMargin">
        <HomeModuleMore title="商品类目" :src="store.imgSrcPrefix + '商品类目.png'" @more-click="splmlistJump">
            <template #table>
                <div class="splmTabs" v-for="(item, index) in sysProductTypeData" :key="index"
                    :class="{ active: splsParameter.type === item.dictValue }" @click="spflSelectTab(item.dictValue)">
                    {{ item.dictLabel }}
                </div>
            </template>
            <template #nr>
                <div class="splmBox">
                    <div class="splmBox_dsp">
                        <img style="width: 100%;height: 100%;" :src="store.imgfengMian + queryProductListData[0]?.logo"
                            alt="">
                        <div class="splmBox_dspText">{{ queryProductListData[0]?.name }}</div>
                    </div>
                    <div class="splmBox_xsp" v-for="item in queryProductListData" :key="item.id">
                        <goodsBox :formData="item" />
                    </div>
                </div>
            </template>
        </HomeModuleMore>
    </div> -->
    <div class="shoyeMargin">
        <HomeModuleMore title="供需信息" :src="store.imgSrcPrefix + '供需信息.png'" @more-click="gxxxlistJump">
            <template #nr>
                <div class="gxgxBox">
                    <gongxushangpin v-for="(item, index) in lcEnterpriseInfosLoadshopNoData" :key="index"
                        :formData="item" />
                </div>
            </template>
        </HomeModuleMore>
    </div>
    <div class="shoyeMargin">
        <HomeModuleMore title="金融信息" :src="store.imgSrcPrefix + '金融信息.png'" @more-click="jrxxlistJump">
            <template #nr>
                <div class="jrxxBox">
                    <div class="jrxxFor" v-for="item in lcFinancialProductInfosDWLoadData" :key="item.id"
                        @click="jrxxDetailsJump(item.id)">
                        <img class="jrxxForImg" :src="store.imgfengMian + item.fengmian" alt="">
                        <div class="jrxxForRight">
                            <div class="jrxxForRightTitle">{{ item.name }}</div>
                            <div class="jrxxForRightText">参考利率范围： {{ item.base_rate_min }} - {{ item.base_rate_max }}%
                            </div>
                            <div class="jrxxForjgFlex">
                                <span class="jrxxForjgText">￥</span>
                                <span class="jrxxForjgData">{{ item.loan_limit }} 万</span>
                                <span class="jrxxForjgText">贷款金融</span>
                            </div>
                            <div class="jrxxForRightTextFlex">
                                <span>贷款期限：{{ item.loan_term }}</span>
                                <span>担保方式: {{ item.guarantee_mode }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </template>
        </HomeModuleMore>
    </div>
    <div class="shoyeMargin">
        <HomeModuleMore title="推荐展会" :src="store.imgSrcPrefix + '推荐展会.png'" @more-click="tjzhlistJump">
            <template #nr>
                <div class="tjzhBox">
                    <ExhibitionListCard class="listCardBox" v-for="(item, index) in tjzhlcExhibitionsInfosDWLoadData"
                        :key="index" :exhibition="item" />
                </div>
            </template>
        </HomeModuleMore>
    </div>
</template>

<script setup>
import RoundCornerCarousel from '@/components/general/RoundCornerCarousel.vue';
import HorizontalScrolling from '@/components/general/HorizontalScrolling.vue';
import HomeModuleMore from '@/components/general/HomeModuleMore.vue';
import EnterpriseInformationList from '@/components/general/EnterpriseInformationList.vue';
import gongxushangpin from '@/components/general/gongxushangpin.vue';
import goodsBox from '@/components/general/goodsBox.vue';
import ExhibitionListCard from '@/components/general/ExhibitionListCard.vue';
import { ref, onMounted } from 'vue';
import { lcSupplyDemandInfosLoadGongXuInFoNo, lcEnterpriseInfosLoadshopNo, queryNewsList, queryEnterpriseList, queryProductList, lcExhibitionsInfosDWLoad, lcFinancialProductInfosDWLoad } from "@/api/api.js";
import { sysProductType } from '@/api/dictionary.js';
import { useRouter } from 'vue-router';
import { useStore } from '@/store/store';
const store = useStore()
const router = useRouter();
const xwdtData = ref([]) // 新闻动态

onMounted(() => {
    xwdtListfun() // 新闻动态数据
    // lcSupplyDemandInfosLoadGongXuInFoNofun() // 精选
    // sysProductTypefun() // 商品类型
    // queryEnterpriseListfun() // 企业数据
    // queryProductListfun() // 商品列表展示
    lcEnterpriseInfosLoadshopNofun() // 供需信息
    lcExhibitionsInfosDWLoadfun() // 推荐展会数据
    lcFinancialProductInfosDWLoadfun() // 金融信息
})
// 精选商品
const productList = ref([]) // 精选商品
const lcSupplyDemandInfosLoadGongXuInFoNofun = async () => {
    const res = await lcSupplyDemandInfosLoadGongXuInFoNo({
        pageNum: 1,
        pageSize: 10,
        is_jingxuan: 1
    });
    productList.value = res.data
}
const lbtImg = ref([]);
// 获取新闻动态数据
const xwdtListfun = async () => {
    const res = await queryNewsList({
        page: 1,
        limit: 8,
        new_type: '999'
    })
    lbtImg.value = res.data.map(item=>{
        return {
            id: item.id,
            title: item.title,
            url: store.imgfengMian + item.file_path
        };
    });
    xwdtData.value = res.data;
}
// 获取企业数据
const rzqyxxData = ref([]) // 入驻企业
const queryEnterpriseListfun = async () => {
    const res = await queryEnterpriseList({
        page: 1,
        limit: 5,
    })
    rzqyxxData.value = res.data.map(item => {
        return {
            ...item,
            logo: item.picture.find(a => a.attachment_type === 'LOGO')?.file_path || ''
        };
    })
}
// 商品类型点击事件
const spflSelectTab = (val) => {
    splsParameter.value.type = val
    queryProductListfun()
}
// 商品类型
const sysProductTypeData = ref([]);
const sysProductTypefun = async () => {
    const res = await sysProductType();
    sysProductTypeData.value = res.data
}
// 商品列表展示
const splsParameter = ref({
    pageNum: 1,
    pageSize: 8,
    type: '10001',
})
const queryProductListData = ref([]);
const queryProductListfun = async () => {
    const res = await queryProductList(splsParameter.value);
    if (res.code === 200) {
        queryProductListData.value = res.data.map(item => {
            return {
                ...item,
                logo: item.upload.find(a => a.attachment_type === 'Cover')?.file_path || ''
            };
        })
    }
}
// 供需信息
const lcEnterpriseInfosLoadshopNoData = ref([])
const lcEnterpriseInfosLoadshopNofun = async () => {
    const res = await lcEnterpriseInfosLoadshopNo({
        page: 1, // 当前页码
        limit: 3, // 每页显示的条数
    });
    lcEnterpriseInfosLoadshopNoData.value = res.data
}
// 推荐展会数据
const tjzhlcExhibitionsInfosDWLoadData = ref([]) // 推荐展会列表数据
const lcExhibitionsInfosDWLoadfun = async () => {
    const res = await lcExhibitionsInfosDWLoad({
        pageNum: 1, // 当前页码
        pageSize: 10, // 每页显示的条数
        type: '推荐展会',
    });
    tjzhlcExhibitionsInfosDWLoadData.value = res.result;
}
// 金融信息
const lcFinancialProductInfosDWLoadData = ref([])
const lcFinancialProductInfosDWLoadfun = async () => {
    const res = await lcFinancialProductInfosDWLoad({
        pageNum: 1,
        pageSize: 9,
    });
    lcFinancialProductInfosDWLoadData.value = res.result;
}
const xwdtckgdfun = () => {
    router.push({
        path: '/newsList',
        query: { title: '新闻动态' }
    })
}
const xwdtItemfun = (id) => {
    router.push({
        path: '/newsDetail',
        query: { id: id }
    });
}
// 金融信息详情
const jrxxDetailsJump = (id) => {
    router.push({ path: '/financeDetails', query: { id: id } })
}
const rzqylistJump = () => {
    router.push({ path: '/EnterpriseList' })
}
// 商品类目
const splmlistJump = () => {
    router.push({ path: '/goodsList' })
}
// 金融信息
const jrxxlistJump = () => {
    router.push({ path: '/financeList' })
}
// 推荐展会
const tjzhlistJump = () => {
    router.push({ path: '/ExhibitionList' })
}
// 供需信息
const gxxxlistJump = () => {
    router.push({ path: '/supplyList' })
}
</script>

<style scoped lang="scss">
.lbtlistFlex {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.syxwdt {
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 8px;
    padding: 0 20px;

    .syxwdt_flexTitle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20px 0;
        border-bottom: 1px solid #CCCCCC;

        .syxwdt_bt {
            font-size: 16px;
            color: #1F1F1F;
        }

        .syxwdt_ckgd {
            font-size: 12px;
            color: #979797;
            cursor: pointer;
            transition: color 0.3s ease; // 添加过渡效果

            &:hover {
                color: $green-color; // 使用项目主题绿色
                // 或使用固定颜色值：#2B893A
            }
        }
    }

    .syxwdt_list {
        // padding: 0 20px;

        .syxwdt_listFor {
            padding: 10px 0;
            border-bottom: 1px dashed #CCCCCC;
            font-size: 14px;
            color: #1F1F1F;
            white-space: nowrap; // 禁止换行
            overflow: hidden; // 隐藏溢出内容
            text-overflow: ellipsis; // 显示省略号
            cursor: pointer;
            transition: color 0.3s ease; // 添加过渡效果

            &:hover {
                color: $green-color; // 使用项目主题绿色
                // 或使用固定颜色值：#2B893A
            }
        }
    }
}

.shoyeMargin {
    margin-top: 50px;
}

.splmTabs {
    cursor: pointer;
    font-size: 16px;
    color: #1F1F1F;

    &.active {
        color: $green-color;
        font-weight: bold;
        transition: color 0.3s ease;
    }
}

.splmBox {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    width: 100%;

    .splmBox_dsp {
        width: calc(40% - 16px);
        position: relative;
        border-radius: 8px;
        overflow: hidden;
        height: 310px;

        .splmBox_dspText {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            font-size: 16px;
            color: #FFFFFF;
            padding: 10px 18px;
            background: rgb(0, 0, 0, 0.5);
        }
    }

    .splmBox_xsp {
        width: calc(20% - 16px);
    }
}

.gxgxBox {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.jrxxBox {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;

    .jrxxFor {
        width: calc(33% - 10px);
        display: flex;
        align-items: center;
        background: linear-gradient(180deg, #F2F2F2 0%, #FFFFFF 19%), #FFFFFF;
        border-radius: 8px;
        overflow: hidden;

        .jrxxForImg {
            width: 33%;
            flex-shrink: 0;
        }

        .jrxxForRight {
            padding: 10px;

            .jrxxForRightTitle {
                font-size: 18px;
                color: #333333;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
                text-overflow: ellipsis;
                line-height: 1.5;
                max-height: 3em;
                margin-bottom: 7px;
            }

            .jrxxForRightText {
                font-weight: 300;
                font-size: 12px;
                color: #333333;
            }

            .jrxxForjgFlex {
                display: flex;
                align-items: flex-end;
                gap: 5px;

                .jrxxForjgText {
                    font-weight: 300;
                    font-size: 12px;
                    color: #EF1F1F;
                }

                .jrxxForjgData {
                    font-weight: bold;
                    font-size: 14px;
                    color: #EF1F1F;
                }
            }

            .jrxxForRightTextFlex {
                margin-top: 6px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                font-weight: 300;
                font-size: 12px;
                color: #333333;
            }
        }
    }
}

.tjzhBox {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;

    .listCardBox {
        width: calc(20% - 16px); // 5列布局（100% / 5 = 20%）
        flex-shrink: 0;
    }
}
</style>